<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
<style>
h1 {
	margin-left: 40px;
	margin-top: 80px;
	margin-bottom: 50px;
}

ul {
	list-style: none;
}

.kaitou {
	width: 400px;
	color: black;
	border: 1px solid #ff0080;
	margin-bottom: 30px;
	padding-left: 20px;
}

body {
	background-color: papayawhip;
}
</style>
<title>文章列表</title>
</head>
<body>
	<div>
		<h1>文章列表</h1>
		<ul>
			<!-- for循环 -->
			<c:forEach var="t" items="${articles}">
				<div class="kaitou">
					<li>
						<h2>${t.title}</h2>
						<p>Content：${t.content}</p>
						<p>Author：${t.username}</p>
						<p>Time：${t.publishDate}</p>
						<p>
							<a href="./del.do?id=${t.id}">删除</a>
						</p>
					</li>
				</div>
			</c:forEach>
		</ul>

		<ul class="pagination">

			<li class="${currentPage == 0 ? 'disabled' : ''}"><a
				href="./list.do?page=${currentPage == 0 ? currentPage : currentPage - 1}">
					<span>上一页</span>
			</a></li>

			<c:if test="${currentPage < 5}">
				<c:forEach var="page" begin="0" end="${currentPage + 4}">
					<li class="${currentPage == page ? 'active' : ''}"><a
						href="./list.do?page=${page}">${page}</a></li>
				</c:forEach>
				<li class="disabled"><a>...</a></li>
				<li><a href="./list.do?page=${total}">${total}</a></li>
			</c:if>

			<c:if test="${currentPage >= 5 && currentPage <= (total-5)}">
				<li><a href="./list.do?page=total">0</a></li>
				<li class="disabled"><a>...</a></li>
				<c:forEach var="page" begin="${currentPage-4 }"
					end="${currentPage + 4}">
					<li class="${currentPage == page ? 'active' : ''}"><a
						href="./list.do?page=${page}">${page}</a></li>
				</c:forEach>
				<li class="disabled"><a>...</a></li>
				<li><a href="./list.do?page=${total}">${total}</a></li>
			</c:if>


			<c:if test="${currentPage > (total-5)}">
				<li><a href="./list.do?page=total">0</a></li>
				<li class="disabled"><a>...</a></li>
				<c:forEach var="page" begin="${currentPage-4 }" end="${total}">
					<li class="${currentPage == page ? 'active' : ''}"><a
						href="./list.do?page=${page}">${page}</a></li>
				</c:forEach>
			</c:if>

			<li class="${currentPage == total ? 'disabled' : ''}"><a
				href="./list.do?page=${currentPage == total ? currentPage : currentPage+ 1}">
					<span>下一页</span>
			</a></li>
		</ul>
	</div>

</body>
</html>